<template>
    <div>
        <div class="mt10 mb20">
            <el-button type="primary" icon="el-icon-download" @click="exportFile" >导出</el-button>
        </div>
        <div class="text item">
            <el-table class="sd" stripe border :data="tableData" v-loading="loading">
                <el-table-column align="center" prop="index" label="序号" width="100"></el-table-column>
                <el-table-column align="center" prop="no" label="保单号"></el-table-column>
                <el-table-column align="center" prop="bsName" label="保司"></el-table-column>
                <el-table-column align="center" prop="zjName" label="车厂"></el-table-column>
                <!-- <el-table-column align="center" prop="date" label="购险日期"></el-table-column> -->
                <el-table-column align="center" prop="status" label="保险状态"></el-table-column>
                <!-- <el-table-column align="center" prop="xbStatus" label="续保情况"></el-table-column> -->
                <el-table-column align="center" prop="vCode" label="车辆VIN码"></el-table-column>
                <el-table-column align="center" prop="bonus2" label="奖励金分成"></el-table-column>
                <el-table-column align="center" prop="service" label="数据使用费"></el-table-column>
                <el-table-column align="center" prop="bonus" label="结算金额"></el-table-column>
            </el-table>
            <el-pagination class="tpl-mg-t mt20 fr"
                            small
                            @size-change="pageSizeChange"
                            @current-change="pageCurrentChange"
                            :current-page="queryForm.pageNum"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            :page-size="queryForm.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            style="margin-bottom: 5px">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'settlementDetail',
        data () {
            return {
                // 列表查询条件
                queryForm: {
                    brand: '',
                    activityTitle: '',
                    activityStatus: '',
                    activityId: '',
                    pageNum: 1,
                    pageSize: 10
                },
                // total: 0,
                tableData: [],
                userData: {},
                loading: false
            }
        },
        created () {
            this.queryList();
        },
        computed: {
            total() {
                return this.tableData.length;
            }
        },
        methods: {
            // 点击查询置为第一页
            queryList1 () {
                this.queryForm.pageNum = 1
                this.queryList()
            },
            // 查询列表
            queryList () {
                let cData = [];
                cData = [
                    {"index": "1","no": "263994483758472","bsName": "阳光保险","zjName": "吉利汽车","date": "2020年4月2日","status": "待起保","xbStatus": "无","vCode": "LVSHJXXXXXX384344","bonus": "0元","bonus2": "0元","service": "0元"},
                    {"index": "2","no": "263994483758472","bsName": "中国平安保险","zjName": "吉利汽车","date": "2020年4月2日","status": "保障中","xbStatus": "一年","vCode": "LVSHJXXXXXX384344","bonus": "1000元","bonus2": "500元","service": "500元"},
                    {"index": "3","no": "263994483758472","bsName": "太平洋保险","zjName": "吉利汽车","date": "2020年4月2日","status": "已脱保","xbStatus": "两年","vCode": "LVSHJXXXXXX384344","bonus": "1000元","bonus2": "500元","service": "500元"},
                    {"index": "4","no": "263994483758472","bsName": "中国人保","zjName": "吉利汽车","date": "2020年4月2日","status": "待起保","xbStatus": "三年","vCode": "LVSHJXXXXXX384344","bonus": "0元","bonus2": "0元","service": "0元"},
                ];
                this.tableData = cData;
            },
            reset () {
                this.queryForm.pageNum = 1
                this.queryForm.pageSize = 10
                this.queryList()
            },
            // 每页显示条数
            pageSizeChange (val) {
                let pages = Math.ceil(this.total / val)
                this.queryForm.pageSize = val
                if (this.queryForm.pageNum > pages) {
                    this.queryForm.pageNum = 1
                }
                this.queryList()
            },
            // 当前页码
            pageCurrentChange (val) {
                this.queryForm.pageNum = val
                this.queryList()
            },
            exportFile () {
                if(this.CustomerForm.birthday[0] || this.CustomerForm.vCode != "" || this.CustomerForm.bsType !== "" || this.CustomerForm.bxType !== "" || this.CustomerForm.zjType !== ""){
                    this.$message({ type: 'success', message: `导出成功!` })
                }else{
                    this.$message.warning('请先选择筛选条件！')
                }
                // let params = { ...this.form }
                // for (let key in params) {
                //     if (params[key] === '' || params[key].length === 0) {
                //         delete params[key]
                //     }
                // }
                // if (this.form.dateRange && this.form.dateRange.length === 2) {
                //     params.tssTimeStart = this.form.dateRange[0]
                //     params.tssTimeEnd = this.form.dateRange[1]
                // } else {
                //     this.$message.warning('请选择发生日期范围')
                //     return
                // }
                // /* 请求部分 */
                // let config = {
                //     headers: {}
                // }
                // let token = window.localStorage.getItem('token') || null
                // let account = window.localStorage.getItem('account') || null
                // if (token) {
                //     config.headers['Token'] = token
                //     config.headers['account'] = account
                //     config.responseType = 'blob'
                // }
                // axios.post(`${baseURL}icall/exportIcall`, params, config).then(res => {
                //     let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
                //     let downloadElement = document.createElement('a')
                //     let href = URL.createObjectURL(blob)
                //     downloadElement.href = href
                //     downloadElement.download = 'chart.xls'
                //     document.body.appendChild(downloadElement)
                //     downloadElement.click()
                //     document.body.removeChild(downloadElement)
                //     window.URL.revokeObjectURL(href)
                // }).catch(e => {
                //     let reader = new FileReader()
                //     reader.onload = event => {
                //         let content = reader.result
                //         let json = JSON.parse(content)
                //         if (json) {
                //             this.$message.error(json.message)
                //         } else {
                //             this.$message.error('导出失败')
                //         }
                //     }
                //     reader.readAsText(e.response.data)
                // })
            },
        }
    }
</script>

<style scoped>

</style>
